<template>
  <div>
    <a-modal
      title="学员名单"
      :visible="visible"
      :width="920"
      :footer="null"
      @cancel="visible = false"
      :bodyStyle="{ padding: '12px' }"
    >
      <a-spin :spinning="loading">
        <a-button type="primary" @click="showADDstudent" :disbaled="type !== 3">添加上课学生</a-button>
        <p></p>
        <p>
          <a-input
            v-model="keywords"
            placeholder="请输入姓名/手机号码"
            @pressEnter="getStudent(id, keywords)"
            style="width: 280px"
          >
            <a-tooltip slot="suffix" title="请输入姓名/手机号码">
              <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="getStudent(id, keywords)" />
            </a-tooltip>
          </a-input>
        </p>
        <a-alert
          message="学员观看直播/回放的记录不会实时同步,一般在观看后的30分钟进行更新"
          type="warning"
          style="margin-bottom: 15px"
          show-icon
        />
        <a-table :columns="columns" :data-source="data" class="noBorderIncludePages" :pagination="false">
          <span slot="name" slot-scope="text, record">
            <span v-if="record.student && record.student.name">{{ record.student.name }}</span>
            <span v-else>-</span>
          </span>
          <span slot="main_phone" slot-scope="text, record">
            <span v-if="record.student && record.student.main_phone"
              >{{ record.student.main_phone }}
              <span v-if="record.is_wechat">
                <a-icon type="wechat" style="color: rgb(82, 196, 26)" />
              </span>
              <span v-else>
                <a-icon type="wechat" />
              </span>
            </span>
            <span v-else>-</span>
          </span>
          <a slot="action" slot-scope="text, record">
            <span
              :disbaled="type !== 1"
              v-if="record.student && record.student.id"
              @click="removeStudent(record.student.id)"
              >移出</span
            >
          </a>
          <template slot="expandedRowRender" slot-scope="record">
            <div v-if="record.histories.length > 0">
              <table class="tb">
                <thead>
                  <tr>
                    <th>类型</th>
                    <th>进入时间</th>
                    <th>离开时间</th>
                    <th>观看时长</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(i, k) in record.histories" :key="k">
                    <td>{{i.vtype==1?'直播':i.vtype==2?'回放':''}}</td>
                    <td>{{i.join_time}}</td>
                    <td>{{i.leave_time}}</td>
                    <td>{{i.duration_time}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </a-table>
        <div style="margin-top:15px;padding:0 15px 10px 15px;display:flex;align-items: center;justify-content: space-between;">
            <span v-if="pageDate.pagination">一共{{pageDate.pagination.total}}条数据</span>
            <a-pagination v-model="newPage" :total="pageDate.pagination.total" v-if="pageDate.pagination" @change="pageChage"/>
        </div>
      </a-spin>
      <student-model ref="studentLIST" @reload="addStudent"></student-model>
    </a-modal>
  </div>
</template>

<script>
import { getStudentList, removeStudent, addStudent } from '@/api/lives'
import studentModel from '@/components/student'
export default {
  name: 'studentModal',
  components: {
    studentModel,
  },
  data() {
    return {
      visible: false,
      loading: false,
      keywords: null,
      id: null,
      type: 1,
      columns: [
        { title: '姓名', dataIndex: 'name', scopedSlots: { customRender: 'name' } },
        { title: '手机号', dataIndex: 'main_phone', scopedSlots: { customRender: 'main_phone' } },
        { title: '直播次数', dataIndex: 'look_live_num', align: 'center' },
        { title: '回放次数', dataIndex: 'visit_num', align: 'center' },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center' },
      ],
      data: [],
      pageDate:{},
      newPage:1
    }
  },
  methods: {
    showADDstudent() {
      this.$nextTick(() => {
        this.$refs.studentLIST.showModel()
      })
    },
    showModal(id, type) {
      if (id) {
        this.visible = true
        this.id = id
        this.type = type
        this.getStudent(this.id)
      }
    },
    getStudent(id, data,page=1,pagesize=10) {
      this.loading = true
      this.id = id
      getStudentList({ keywords: data, pageNo: page, pageSize: pagesize }, id)
        .then((res) => {
          this.data = res.data
          this.pageDate=res.meta
        })
        .catch((err) => {
          if (err.data.message) {
            this.$message.error(err.data.message)
          } else {
            this.$message.error('获取学员名单失败')
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    pageChage(page, pageSize){
      this.getStudent(this.id,'',page,pageSize)
    },
    addStudent(data) {
      if (data.length > 0) {
        let arr = []
        data.forEach((val) => {
          arr.push(val.id)
        })
        this.loading = true
        addStudent({ student_ids: arr }, this.id)
          .then((res) => {
            this.getStudent(this.id)
            this.$message.success('添加成功')
          })
          .catch((err) => {
            if (err.data.message) {
              that.$message.error(err.data.message)
            } else {
              that.$message.error('添加失败')
            }
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    removeStudent(id) {
      let that = this
      this.$confirm({
        title: '提示',
        content: '确定移出该学员?',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          that.loading = true
          removeStudent({student_id:id},that.id)
            .then((res) => {
              that.getStudent(that.id)
              that.$message.success('移除成功')
            })
            .catch((err) => {
              if (err.data.message) {
                that.$message.error(err.data.message)
              } else {
                that.$message.error('移除失败')
              }
            })
            .finally(() => {
              that.loading = false
            })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.id = null
        this.type = null
        this.keywords = undefined
      }
    },
  },
}
</script>
<style lang="scss">
.noBorderIncludePages {
  .ant-table-body {
    border: 1px solid #e8e8e8;
    border-bottom: none;
    border-radius: 5px;
  }
}
</style>
<style lang="scss" scoped>
.tb tr > td,
.tb tr > th {
  height: 40px;
  padding-left:15px;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.tb tr > th {
  background: #f7f8f9 !important;
}
.tb {
  border: 1px solid #e8e8e8;
}
</style>